<template>
    <div>
        <!-- 查询 -->
        <el-row class="elRow">
            <el-col class="p-4">
                <el-button class="mr-6" type="primary" @click="add"><el-icon class="mr-1" color="#fff"><Plus /></el-icon>创建广告</el-button>
                <span style="font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 14px;color: #222222;">标题
                    <el-input v-model="query.search_value" class="ya-search-value mb-2 mr-6 ml-1.5" placeholder="请输入标题" clearable />
                </span>
                <span style="font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 14px;color: #222222;">广告类型
                    <el-select v-model="query.category_ids" class="ya-search-value mr-6 ml-1.5" placeholder="全部">
                        <el-option value="3" label="弹窗广告" />
                        <el-option value="4" label="banner广告" />
                        <el-option value="4" label="右下角浮窗" />
                    </el-select>
                </span>
                <span style="font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 14px;color: #222222;">状态
                    <el-select v-model="query.date_value" class="ya-search-value mr-6 ml-1.5" placeholder="全部">
                        <el-option value="3" label="已结束" />
                        <el-option value="4" label="进行中" />
                    </el-select>
                </span>
                <el-button class="mr-2" type="primary" @click="search()">查询</el-button>
                <el-button class="" title="重置" @click="refresh()">重置 </el-button>
            </el-col>
        </el-row>
        <div class="p-4 pt-0">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="封面" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="name" label="广告类型">
                    <template #default="scope">
                        {{ scope.row.type == 1?'弹窗广告':scope.row.type == 2?'banner':'右下角浮窗' }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="曝光量" />
                <el-table-column prop="name" label="有效时间" />
                <el-table-column prop="name" label="状态" />
                <el-table-column prop="position" label="所属位置" />
                <el-table-column prop="url" label="跳转地址" />
                <el-table-column prop="name" label="指定分析师" />
                <el-table-column label="置顶">
                    <template #default="scope">
                        <el-switch v-model="scope.row.switch" />
                    </template>
                </el-table-column>
                <el-table-column label="启用">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_disable" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button class="operation-button" type="primary" size="small" plain :underline="false" @click="() => {
                            $emit('handle-edit', scope.row)
                            }">
                            修改
                        </el-button>
                        <el-link class="ml-4" type="info" @click="getDele(scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <pagination
            v-show="count > 0"
            v-model:total="count"
            v-model:page="query.page"
            v-model:limit="query.limit"
            @pagination="list"
        />
    </div>
</template>
<script>

import Pagination from '@/components/Pagination/index.vue'
import { shortcuts } from '@/utils/index'
import { list,dele,disable,position } from '@/api/platformOperation/advertising'
export default {
    name: 'advertising',
    data () {
        return {
            count: 0,//列表总数
            dateShortcuts: shortcuts,
            list: [],
            query: {
                page: 1,
                limit: 20,
                search_value: '',
                category_ids: '',
                date_value: '',
            },
            tableData: []
        }
    },
    components: {
        Pagination
    },
    mounted () {
        this.init()
    },
    methods: {
        // 删除
        getDele (item) {
            dele(item.id).then(res => {
                if (res.code == 200) {
                    this.init()
                }
            })
        },
        //创建方案
        add () {
            this.$router.push({path: 'advertising/details', query: this.query})
        },
        // 广告列表
        init () {
            list(this.query).then(res => {
                if (res.code == 200) {
                    this.count = res.data.count
                    this.tableData = res.data.list
                }
                console.log(res, 'res<<<<')
            })
        },
        // 搜索
        search () {
            this.query.page = 1
            this.init()
        },
        // 重置
        refresh () {
            this.query = {
                page: 1,
                limit: 20,
                search_value: '',
                category_ids: '',
                date_value: '',
            }
        }
    }
}
</script>
<style lang="scss" scoped>

</style>